import React from 'react';
import { connect } from 'dva';
import {
  Form,
  Input,
  Select,
  Button,
} from 'antd';
import styles from './RegisterPage.css';

const { Option } = Select;

const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 8,
    },
  },
  wrapperCol: {
    xs: {
      span: 12,
    },
    sm: {
      span: 16,
    },
  },
};
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 8,
    },
  },
};

const RegisterPage = ({ dispatch, products }) => {

  const [form] = Form.useForm();

  const onFinish = (values) => {
    const { userid, username, password, phone, group } = values;
    dispatch({
      type: 'users/register',
      userid,
      username,
      password,
      phone,
      group
    });
  };

  const prefixSelector = (
    <Form.Item name="prefix" noStyle>
      <Select
        style={{
          width: 70,
        }}>
        <Option value="86">+86</Option>
      </Select>
    </Form.Item>
  );

  return (
    <Form
      {...formItemLayout}
      form={form}
      name="register"
      className={styles.register_form}
      onFinish={onFinish}
      initialValues={{
        prefix: '86',
      }}
      scrollToFirstError>

      <Form.Item>
        <h1 style={{ width: 500, paddingLeft: 50 }}>员工状态管理系统</h1>
        <div style={{ width: 500, paddingLeft: 50 }}>中国石化工程建设公司设备室</div>
      </Form.Item>

      <Form.Item
        name="userid"
        label="工号"
        rules={[
          {
            required: true,
            message: '工号不能为空!',
          },
        ]}>
        <Input />
      </Form.Item>

      <Form.Item
        name="username"
        label="用户名"
        rules={[
          {
            required: true,
            message: '用户名不能为空!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="password"
        label="密码"
        rules={[
          {
            required: true,
            message: '密码不能为空!',
          },
        ]}
        hasFeedback>
        <Input.Password />
      </Form.Item>

      <Form.Item
        name="confirm"
        label="重复密码"
        dependencies={['password']}
        hasFeedback
        rules={[
          {
            required: true,
            message: '密码不能为空!',
          },
          ({ getFieldValue }) => ({
            validator(rule, value) {
              if (!value || getFieldValue('password') === value) {
                return Promise.resolve();
              }
              return Promise.reject('两次密码输入不相同!');
            },
          }),
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        name="phone"
        label="电话号码"
        rules={[
          {
            required: true,
            message: '电话号码不能为空!',
          },
        ]}>
        <Input
          addonBefore={prefixSelector}
          style={{ width: '100%' }}/>
      </Form.Item>

      <Form.Item
        name="group"
        label="组别">
        <Select defaultValue="0" style={{ width: '100%' }}>
          <Option value="0">技术组</Option>
          <Option value="1">一组</Option>
          <Option value="2">二组</Option>
          <Option value="3">三组</Option>
          <Option value="4">四组</Option>
          <Option value="5">五组</Option>
          <Option value="6">六组</Option>
        </Select>
      </Form.Item>

      <Form.Item {...tailFormItemLayout}>
        <Button type="primary" htmlType="submit">
          注册
        </Button>
      </Form.Item>
    </Form>
  );
};

export default connect(({ isLoggedIn }) => ({
  isLoggedIn,
}))(RegisterPage);
